<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="author" content="order by dede58.com" />
		<title>老司机商城-我的购物车</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<script type="text/javascript" src="js/jquery1.9.1.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body>
		<!-- start header -->
		<!--end header -->

		<!-- start banner_x -->
		<div class="banner_x center">
			<a href="./index.html" target="_blank">
				<div class="logo fl"></div>
			</a>

			<div class="wdgwc fl ml40">我的购物车</div>
			<div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
			<div class="dlzc fr">
				<ul>
					<li>
						<a href="./login.html" target="_blank">登录</a>
					</li>
					<li>|</li>
					<li>
						<a href="./register.html" target="_blank">注册</a>
					</li>
				</ul>

			</div>
			<div class="clear"></div>
		</div>
		<div class="xiantiao"></div>
		<div class="gwcxqbj cart-info">
			<div class="gwcxd center">
				<div class="top2 center">
					<div class="sub_top fl">
						<input type="checkbox" value="quanxuan" class="quanxuan" v-model="isAllChecked" @change="selectAll" />全选
					</div>
					<div class="sub_top fl">商品名称</div>
					<div class="sub_top fl">单价</div>
					<div class="sub_top fl">数量</div>
					<div class="sub_top fl">小计</div>
					<div class="sub_top fr">操作</div>
					<div class="clear"></div>
				</div>
				<div class="content2 center" v-for="(item,index) in cartInfo.cartItems">
					<div class="sub_content fl ">
						<input type="checkbox" :value="item.product.id" class="quanxuan" v-model="selected" @change="changeSelect" />
					</div>
					<div class="sub_content fl"><img :src="imageServerPath+'/'+item.product.image" width="100"></div>
					<div class="sub_content fl ft20" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" :title="item.product.title">{{item.product.title}}</div>
					<div class="sub_content fl ">{{item.product.price}}元</div>
					<div class="sub_content fl">
						<input class="shuliang" type="number" :value="item.count" step="1" min="1" @change="changeNumber(index,$event)">
					</div>
					<div class="sub_content fl">{{item.unitPrice}}元</div>
					<div class="sub_content fl">
						<a href="javascript:void(0);">×</a>
					</div>
					<div class="clear"></div>
				</div>

			</div>
			<div class="jiesuandan mt20 center">
				<div class="tishi fl ml20">
					<ul>
						<li>
							<a href="index.html">继续购物</a>
						</li>
						<li>|</li>
						<li>共<span>{{totalCount}}</span>件商品，已选择<span>{{selectedCount}}</span>件</li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="jiesuan fr">
					<div class="jiesuanjiage fl">合计（不含运费）：<span>{{totalPrice}}元</span></div>
					<div class="jsanniu fr"><input class="jsan" type="submit" name="jiesuan" value="去结算" @click="account" /></div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>

		</div>
	</body>
	<script>
		//计算总价
		function getTotalPrice(cartItems, selectedIds) {
			var total = 0;
			for(var i = 0; i < cartItems.length; i++) {
				var cartItem = cartItems[i];
				var product = cartItem.product;
				if($.inArray(product.id, selectedIds) != -1) {
					total += cartItem.count * product.price;
				}
			}
			return total;
		}

		$.ajax({
			type: "get",
			url: serverPath + "cart/getCartInfo",
			xhrFields: {
				withCredentials: true
			},
			success: function(res) {
				new Vue({
					el: ".cart-info",
					data: {
						cartInfo: res.data,
						imageServerPath: imageServerPath,
						selected: [],
						isAllChecked: false,
						totalPrice: 0.0
					},
					computed: {
						selectedCount: function() {
							return this.selected.length;
						},
						totalCount: function() {
							return this.cartInfo.cartItems.length;
						}
					},
					methods: {
						//切换数量
						changeNumber: function(index, event) {
							var newVal = event.target.value;
							var cartItems = this.cartInfo.cartItems;
							cartItems[index].count = newVal;
							cartItems[index].unitPrice = newVal * cartItems[index].product.price;
							this.cartInfo.cartItems[index] = cartItems[index];
							this.totalPrice = getTotalPrice(cartItems, this.selected);
							//真正在服务端修改购物车中的数量信息
							$.ajax({
								url: serverPath + "cart/changeNum",
								type: "post",
								data: {
									pid: cartItems[index].product.id,
									count: newVal
								},
								xhrFields: {
									withCredentials: true
								},
								error: function() {
									alert("购物车修改失败");
								}
							});

						},
						//切换选中状态
						changeSelect: function() {
							var selectedIds = this.selected;
							var cartItems = this.cartInfo.cartItems;
							//选中的长度
							var selectedLength = selectedIds.length;
							//总长度
							var totalLength = cartItems.length;
							this.isAllChecked = (selectedLength == totalLength);
							this.totalPrice = getTotalPrice(cartItems, this.selected);
						},
						//全选和全不选
						selectAll: function() {
							var cartItems = this.cartInfo.cartItems;
							if(this.isAllChecked) {
								this.selected = $.map(cartItems, function(item) {
									return item.product.id;
								});
							} else {
								this.selected = [];
							}
							this.totalPrice = getTotalPrice(cartItems, this.selected);
						},
						//结算
						account: function() {
							var cartItems = this.cartInfo.cartItems;
							var selectedIds = this.selected;
							if(selectedIds.length == 0) {
								alert("尚未选择任何了购物车商品");
							} else {
								var orderItems = [];
								for(var i = 0; i < cartItems.length; i++) {
									var cartItem = cartItems[i];
									if($.inArray(cartItem.product.id, selectedIds) != -1) {
										orderItems.push({
											pid: cartItem.product.id,
											count: cartItem.count
										});
									}
								}
								//提交购物车数据并生成订单
								$.ajax({
									url: serverPath + "order/generate",
									type: "post",
									data: {
										items: JSON.stringify(orderItems)
									},
									xhrFields: {
										withCredentials: true
									},
									success: function(res) {
										if(res.code == 200) {
											location.href="submit-order.html?oid="+res.data;
										}
									}
								});

							}
						}

					}
				});
			}
		});
	</script>

</html>